<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="16" :xs="24">
        <el-card shadow="hover">
          <el-form ref="form" :model="user" :rules="rules" label-width="130px">
            <el-form-item label="租户名称" prop="oldPassword">
              <el-input v-model="reluFrom.oldPassword" placeholder="请输入租户名称"/>
            </el-form-item>
            <el-form-item label="租户logo" prop="oldPassword">
              <el-upload
                class="avatar-uploader"
                action="string"
                :show-file-list="false"
                :http-request="uploadImage"
                :before-upload="beforeAvatarUpload">
                <img v-if="reluFrom.picUrl" :src="reluFrom.picUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="钢筋加工总承包量" prop="newPassword">
              <el-input class="w90" v-model="reluFrom.newPassword" placeholder="请输入钢筋加工总承包量"/>T
            </el-form-item>
            <el-form-item label="钢筋加工控制损耗" prop="newPassword">
              <el-input class="w90" v-model="reluFrom.newPassword" placeholder="请输入钢筋加工总承包量"/>%
            </el-form-item>
            <el-form-item label="加工厂面积" prop="newPassword">
              <el-input class="w30" v-model="reluFrom.newPassword" placeholder="请输入"/>m *
              <el-input class="w30" v-model="reluFrom.newPassword" placeholder="请输入"/>m =
              <el-input class="w30" v-model="reluFrom.newPassword" placeholder="请输入"/>m²
            </el-form-item>
            
            <el-form-item label="加工场位置" prop="confirmPassword">
              <el-cascader
                size="large"
                :options="chinaOptions"
                v-model="reluFrom.searea"
                filterable
                @change="handleChange"
              >
              </el-cascader>
              <el-input class="w55" v-model="reluFrom.newPassword" placeholder="请输入详细地址"/>
                
            </el-form-item>
            <el-form-item label="劳务企业" prop="confirmPassword">
               <el-select v-model="reluFrom.value1" multiple placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              
            </el-form-item>
            <el-form-item label="工人数量" prop="oldPassword">
              <el-input v-model="reluFrom.oldPassword" placeholder="请输入工人数量"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="submit">保存</el-button>
              <el-button size="mini" @click="submit">重置</el-button>
            </el-form-item>
        </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { provinceAndCityData,CodeToText } from 'element-china-area-data'
import { getUserProfile } from '@/api/sys/user'

export default {
  name: 'Profile',
  components: { },
  data() {
    return {
      user: {},
      reluFrom:{searea:[]},
      chinaOptions:provinceAndCityData,
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        rules: {
        name: [
          { required: true, message: "请输入表名称", trigger: "blur" }
        ],
        comment: [
          { required: true, message: "请输入表描述", trigger: "blur" }
        ],
        className: [
          { required: true, message: "请输入实体类名称", trigger: "blur" }
        ],
        functionAuthor: [
          { required: true, message: "请输入作者", trigger: "blur" }
        ]
      },
      activeTab: 'userinfo'
    }
  },
  created() {
    this.getUser()
    console.log(this.publicPath)
  },
  methods: {
    submit(){
       this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          
         
        }
      })
    },
    handleChange(value){
      console.log(value)
      var name = ''
			value.map(item => name += CodeToText[item] + '') //将省市区三个拼接一起
			console.log(name)

    },
    // 上传图片方法
    uploadImage(param){
      const formData = new FormData()
      formData.append('file', param.file)
      // uploadAvatar(formData).then(response => {
      //   console.log('上传图片成功')
      //   this.form.picUrl = process.env.VUE_APP_BASE_API + response.imgUrl
      // }).catch(response => {
      //   console.log('图片上传失败')
      // })
    },
    // 资质照片上传前校验
    beforeAvatarUpload(file) {
      const isPic = file.type.indexOf('image') >= 0;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPic) {
        this.$message.error('资质照片只能为图片格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isPic && isLt2M;
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data
      })
    }
  }
}
</script>
<style>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .w90{
    width: 90%;
    margin-right: 10px;
    text-align: center;
  }
 .w55{
    width: 55%;
    margin-left: 10px;
    text-align: center;
 }
 .w30{
   width: 24%;
    margin-right: 10px;
 }
 </style>